@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-loader';

$sizes: 'xs', 's', 'm', 'l';

.sun {
  pointer-events: none;
  fill: currentColor;

  @each $size in $sizes {
    &[data-size="#{$size}"] {
      @include composite-var($loader, 'sun', $size);
    }
  }

  & > path {
    stroke: currentColor;
    animation-name: loading-wheel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    &:nth-child(1) {
      animation-duration: 1000ms;
      animation-delay: -125ms;
    }

    &:nth-child(2) {
      animation-duration: 1000ms;
      animation-delay: -250ms;
    }

    &:nth-child(3) {
      animation-duration: 1000ms;
      animation-delay: -375ms;
    }

    &:nth-child(4) {
      animation-duration: 1000ms;
      animation-delay: -500ms;
    }

    &:nth-child(5) {
      animation-duration: 1000ms;
      animation-delay: -625ms;
    }

    &:nth-child(6) {
      animation-duration: 1000ms;
      animation-delay: -750ms;
    }

    &:nth-child(7) {
      animation-duration: 1000ms;
      animation-delay: -875ms;
    }

    &:nth-child(8) {
      animation-duration: 1000ms;
      animation-delay: -1000ms;
    }
  }
}

@keyframes loading-wheel {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 0.125;
  }

  100% {
    opacity: 1;
  }
}
